<template>
    <!-- id="dialog_show2" style="" -->
    <div class="message" v-if="customBoxShow || dialogBoxShow">
        <!-- :class="{'show_custom':customBoxShow || dialogBoxShow,'hide':!customBoxShow }" -->
  <div class="custom-father">
        <div class="dialog-box  bg-fff show_custom"  id="dialog_show2">
          <div class="dialog-main">
              <div class="banner-tab">
                  <ul class="clearfix">
                      <li class="fl f36 color-333 border-bottom text-center "
                       @click="type = 'custom'"
                      :class="{'active': type === 'custom','width100':customBoxShow && !dialogBoxShow}"
                            v-if="customBoxShow">客服消息</li>

                      <li class="fl f36 color-333 border-bottom text-center"  @click="type = 'system'"
                      :class="{'active': type === 'system' ,'width100':!customBoxShow && dialogBoxShow}"
                            v-if="dialogBoxShow">系统消息</li>
                  </ul>
              </div>
              <div class="kefu_message "  v-if="customBoxShow && type === 'custom' ">
                  <div class="dialog-message px-30">
                      <ul>
                          <li class="py-30 border-bottom clearfix fw"  v-for="item in list" @click="goHuanxin(item)" >
                                  <div class="left-box fl">
                                      <img src="~images/evaulation/5.png" alt="" style="border-radius: 0">
                                      <i class="icon-red-circle" v-show="!item.IsRead"></i>
                                  </div>
                                  <div class="right-box  fr">
                                      <div class="msg-title mt-10">
                                          <p class="f30 color-333">{{item.Content|returnTitle}}</p>
                                      </div>
                                      <div class="msg-tip clearfix mt-20">
                                          <span class="fl f24 color-999">尽快回复我</span>
                                          <span class="fr fontarial color-999 f24">{{item.LastModifyDate | format}}</span>
                                      </div>
                                  </div>
                          </li>
                      </ul>
                  </div>
                  <div class="dialog-foot">
                      <a class="dialog_close f36" @click="dialogBoxShow = false; customBoxShow = false;">关闭</a>
                  </div>
              </div>
                   <!-- 风控防骗提醒 -->
                    <div class="Mfw px-30 notice_risk border-bottom"
                        v-if="dialogBoxShow && isfengkong"
                    ><i class="icon_notice fl" ></i><p class="f24 notice_wz">出售商品无需扫码，切勿私下交易！</p></div>

              <div class="system_message" :class="{'Mmt-811':dialogBoxShow && isfengkong}" v-if="dialogBoxShow && (type === 'system' || !customBoxShow)">
                  <div class="dialog-message" >
                    
                      <ul  class=" px-30 " >
                          <li class="py-30 border-bottom fw" v-for="(item,index) in msgList" @click="deleteMsg(1)" >

                              <div class="fw">
                                  <!-- 风控一期 -->
                                    <div v-if="item.msgType == 15" class="tile f30 color-000 fl" style="width:85%;">
                                            <a :href='item.opContent4 '><i class="fontarial"> {{item.opContent3}}</i></a>
                                        </div>

                                  <div class="tile f30 color-000 fl" style="width:85%;" v-else>
                                            <i class="fontarial" v-if="item.opContent2">{{msgHeadList[index]}}{{msgBodyList[index]}}   {{item.opContent2}}，</i>
                                            <!--{{moreMsgList[index]}}。-->
                                            <span class="buyer-status6" v-if="item.opContent&&item.flowState == 29||item.flowState == 30||item.flowState == 31">
                                            {{item.opContent}}
                                             </span>
                                            <span class="buyer-status6" v-else-if="item.opContent4&&item.flowState == 10">
                                            已付款
                                             </span>
                                             <span class="buyer-status6" v-else-if="(item.msgType==11 || item.msgType==12 || item.msgType==14)&&item.flowState == 10">
                                            {{msgHeadList[index]}}{{moreMsgList[index]}}
                                             </span>
                                            <span class="buyer-status6" v-else-if="item.opContent4&&item.flowState == 0">
                                            {{item.opContent4.split("/")[0].replace('，请通过“我”来查看订单详情', '')}}
                                             </span>
                                            <span class="buyer-status6" v-else-if="item.opContent4&&item.flowState == 6&&item.goodsType == 1">
                                            {{item.opContent4}}
                                             </span>
                                            <span class="buyer-status6" v-else-if="item.opContent4&&item.opContent4.indexOf('/') > 0&&item.opContent4.split('/')[1]&&(item.flowState == 1 && item.msgType == 1) || item.flowState == 32">
                                        {{item.opContent4.split("/")[0]}}
                                    </span>
                                            <span class="buyer-status6" v-else-if="item.opContent4&&item.opContent4.indexOf('/') > 0&&item.opContent4.split('/')[1]">
                                        {{item.opContent4.split("/")[1]}}
                                    </span>
                                            <span class="buyer-status6" v-else-if="item.opContent4">
                                        {{item.opContent4.split("/")[0]}}
                                    </span>
                                            <span class="buyer-status6" v-if="!item.opContent4&&item.otherData">
                                        {{JSON.parse(item.otherData).opContent5}}
                                    </span>

                                  </div>
                                  <span class="fr dlog-ico"></span>
                              </div>
                              <!-- 风控一期 -->
                               <div class="see f24 color-999 fw" v-if="item.msgType == 15"><span class="fr fontarial">{{
                                        item.lastUpdateTime|format}}</span>{{item.opContent2}}
                                    </div>

                              <div class="see f24 color-999 fw" v-else><span class="fr fontarial" href="#">{{
                                      item.createTime|format}}</span>{{orderMsg}}
                              </div>
                          </li>
                      </ul>
                  </div>
                  <div class="dialog-foot">
                      <a class="dialog_close border-right f36" @click='deleteMsg'>关闭</a>
                      <a class="dialog_close f36" @click="deleteMsg(1)">我的消息中心</a>
                  </div>
              </div>
          </div>
        </div>
        </div>
   <div class="dialog_cover" v-show="dialogBoxShow || customBoxShow" @touchmove.prevent></div>
    </div>
</template>
<script>
  import {formatTimeFilter} from 'components/common/filters';
  import api  from 'api/index';
 export default{
  data(){
    return{
        dialogBoxShow: false,
        customBoxShow:false,//客服消息是否显示
        msgList: [],
        msgHeadList: [],
        msgBodyList: [],
        msgTime: '',
        type:'custom',
        moreMsgList: [],
        orderMsg:'订单消息',
        //list:[],//主站客服信息
        match:{
          matchDanbao : function ( data ) {
            return `http://danbao.5173.com/ajax.axd?methodName=GetOrderIMInfo&orderid=${data.OrderId}&usertype=${data.UserType}&tradingtype=1&callback=callback`
          },
          matchJishou : function ( data ) {
            return `http://consignment.5173.com/ajax.axd?methodName=GetOrderIMInfo&orderid=${data.OrderId}&usertype=${data.UserType}&tradingtype=2&callback=callback`;
          },
          matchZhanghao : function ( data ){
              return  `http://gameid.5173.com/BankInfo.axd?methodName=GetOrderIMInfo&orderid=${data.OrderId}&usertype=${data.UserType}&tradingtype=5&callback=callback`;
          },
          matchShouyou :  function ( data ){
            return  `http://sy.5173.com/api/order/getorderim?orderid=${data.OrderId}&usertype=${data.UserType}&callback=callback`;
          },
          matchMzhan :  function ( data ){
            return  `${location.origin}/api/mobile-order-service/rs/orderdata/getOrderIm?orderId=${data.OrderId}&userType=${data.UserType}&callback=callback`;
          },
          matchJbmall :  function ( data ){
            return `http://yxbmall.5173.com/gamegold-facade-frontend/services/orderdata/getOrderIm?orderId=${data.OrderId}&userType=${data.UserType}&callback=callback`;
          }
        },
        isfengkong:false
        }
  },
  created(){
    this.getCustomMsgList();
    this.getMsgList();
  },
  mounted(){

  },
  methods:{
     goHuanxin(v){
        let vm = this;
      //跳转环信所需要的接口地址returnURL

        var matchType =  (data)=>{
        switch ( data.OrderType ){
          case 1:
            return vm.match.matchDanbao(data) ;
            break;
          case 2:
            return vm.match.matchJishou(data) ;
            break;
          case 3:
            return vm.match.matchZhanghao(data) ;
            break;
          case 4:
            return vm.match.matchShouyou(data) ;
            break;
          case 5:
            return vm.match.matchMzhan(data) ;
            break;
          case 6:
            return vm.match.matchJbmall(data) ;
            break;
          default:
            break;
        }
      }

      api.BuyerCenterApi.getOrderIm(matchType(v))
         .then((data)=>{
           if (data.body.StatusCode == 200 && data.body.Order ) {
               let order = data.body.Order;
               console.log(order)
                   if (order.DefaultIM==1 || (order.DefaultIM==2 && order.WYCustomService) || (order.DefaultIM==2 && !order.WYCustomService && order.IsOpenHX) || (!order.DefaultIM && order.IsOpenHX&&order.DefaultIM!=0)) {
                       location.href = `/member/huanxin1.html?url=${encodeURIComponent(matchType(v))}`;
                   } else {
                       if(/baidu/i.test(navigator.userAgent.toLowerCase())||/MicroMessenger/i.test(navigator.userAgent.toLowerCase())){
                           this.$messagebox({
                               message: "如点击联系客服无法启动QQ，请加客服QQ号("+order.CustomServiceQQ+")"
                           })
                       }else {
                           window.location.assign('mqqwpa://im/chat?chat_type=wpa&uin=' + order.CustomServiceQQ + '&version=1&src_type=web&web_src=oicqzone.com')
                       }
                   }
           }

         });
     },
     //获取客服消息
     getCustomMsgList(){
          this.$http.jsonp('//ordermessage.5173.com/api/message/GetMsg',{
                  'jsonp':'jsoncallback'
                })
                .then((res)=>{
                  if (res && res.status == 200 && res.body && res.body.Datas) {
                      this.list = res.body.Datas;
                      if (this.list.length <= 0) {return;};

                      for(let item of this.list){

                          if (!item.IsRead) {
                              this.customBoxShow = true;
                              break;
                          }
                      }
                  }
                })
     },
     //获取主站提醒消息
     getMsgList: function () {
                let self = this;
        self.$http.get(self.$CONSTANTS.P30006 + 'message/selectmessageindexlist', {
                    headers: {
                        "Cache-Control": "no-cache"
                    },
                    params: {
            page: 1,
                        pageSize: 3
                    }
                }).then
                (function (res) {
                    if (res.data && res.data.responseStatus.code == "00") {
                        if (res.data.totalCount > 0) {
              self.msgList = res.data.messageList;
                            for (var i = self.msgList.length - 1; i >= 0; i--) {
                                if (self.msgList[i].isSeller == true) {
                                    if(self.msgList[i].flowState ==  1 || 
                                        self.msgList[i].flowState ==  7 ||
                                        self.msgList[i].flowState == 10 ||
                                        self.msgList[i].flowState == 16 ||
                                        self.msgList[i].flowState == 46 ||
                                        self.msgList[i].flowState == 88){
                                           self.isfengkong = true     
                                    }    

                                    if (self.msgList[i].msgType == 11 || self.msgList[i].msgType == 12 || self.msgList[i].msgType == 14) {
                                        var msgTitle;
                                        if (self.msgList[i].msgType == 11) {
                                            msgTitle = '投诉'
                                        } else if (self.msgList[i].msgType == 12) {
                                            msgTitle = '建议'
                                        } else if (self.msgList[i].msgType == 14) {
                                            msgTitle = '咨询'
                                        }
                                        self.msgHeadList.unshift(`您的${msgTitle}`);
                                    } else {
                                        self.msgHeadList.unshift("您发布的");
                                    }
                                } else {
                                    if (self.msgList[i].msgType == 11 || self.msgList[i].msgType == 12 || self.msgList[i].msgType == 14) {
                                        var msgTitle;
                                        if (self.msgList[i].msgType == 11) {
                                            msgTitle = '投诉'
                                        } else if (self.msgList[i].msgType == 12) {
                                            msgTitle = '建议'
                                        } else if (self.msgList[i].msgType == 14) {
                                            msgTitle = '咨询'
                                        }
                                        self.msgHeadList.unshift(`您的${msgTitle}`);
                                    } else {
                                        self.msgHeadList.unshift("您购买的");
                                    }
                                }
                                ;
                                if (self.msgList[i].msgType == 1) {
                                    self.msgBodyList.unshift("商品")
                                } else if (self.msgList[i].msgType == 2) {
                                    self.msgBodyList.unshift("订单")
                                }
                if (self.msgList[i].flowState == 10) {
                                    if (self.msgList[i].msgType == 11 || self.msgList[i].msgType == 12 || self.msgList[i].msgType == 14) {
                                        self.moreMsgList.unshift("客服已回复，请您点击消息查看")
                                        self.orderMsg='回复时间'
                                    }else{
                                        self.moreMsgList.unshift("正在交易中")
                                    }
                                } else {
                                    self.moreMsgList.unshift(self.msgList[i].msg)
                                }
//                                this.msgHeadList.push(this.msgList.isSeller);
//                                this.msgBodyList.push(this.msgList.msgType);
                            }
                            self.dialogBoxShow = true;
                            //如果客服信息提醒没有就显示M站消息提醒

                            // if (!this.customBoxShow && this.list.length == 0) {
                            //     this.type = 'system';
                            // };
                        } else {
                            self.dialogBoxShow = false;
                        }
                    } else {
                        // alert();
                        self.dialogBoxShow = false;
                    }
                });
            },

            async deleteMsg(n) {
                let self = this;
        //await self.delmsg()
                self.dialogBoxShow = false;
                self.customBoxShow = false;//同时关闭客服信息
                if (n === 1) {
                    location.href = '/vue/message'
                }

            },
             delmsg() {
//                return new Promise((resolve, reject) => {
//                    this.$http.get(this.$CONSTANTS.APIGoods + 'message/deletemessageindexlist', {}).then(
//                        res => {
//                            if (res.body.success) {
//                                resolve()
//                            } else {
//                                resolve()
//                            }
//                        },
//                        err => {
//                            reject()
//                            console.log(err);
//                        }
//                    )
//                })
                        },
            },
  filters:{
    format: formatTimeFilter,
    returnTitle(val){
      let  data = JSON.parse(val);
      return data.Title;
    }
  }
 }
</script>
<style src="css/index-cl.css" scoped></style>
<style>
    .dialog_cover {
        position: fixed;
        _position: absolute;
        left: 0;
        top: 0;
        display: block;
        z-index: 555;
        width: 100%;
        height: 100%;
        filter: alpha(opacity=70);
        opacity: 0.7;
        background: #000;
    }
    .show_custom{
      margin: auto;
      z-index: 1001;
      display: block;

     /* opacity: 1;
      top: 4rem;

      position: absolute;
      z-index: 1001;
      display: block;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;*/
    }
    #dialog_show {
        left: 50%;
        margin-left: -3.6rem;
        opacity: 1;
        top: 3rem;
        /*transform: translate3d(-50%, 0, 0);*/
        position: fixed;
        width: 7.2rem;
        z-index: 1001;
        display: block;
    }


    .see {
        height: 0.48rem;
        line-height: 0.68rem;
    }

    .dialog-message {
        height: auto;
        display: block;
        overflow: hidden;
    }
    .fwright {
        display: block;
        background: url(~images/kefu/right.png) right center no-repeat;
        height: .5rem;
        width: .13rem;
        background-size: .13rem;
    }

    .fw > .tile {
        width: 95% !important;
    }
    .width100 {
      width: 100% !important;
    }
    .message{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        z-index: 99;
        top: 0;
    }
    .custom-father{
       position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      height: auto;
      max-height: 8rem;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .dailog-message ul>a{
      display: block;
      height: 1.5rem;
    }
    .dailog-message ul  a li{
       height: 100%;
    }
 
 /* 风控警告提示 */
  /* .notice_top  {position:absolute;top:0rem;} */
.Mfw {width:100%; clear: both;}
.Mmt-811{margin-top: 0.811rem}
.notice_risk  {height: auto;display: block;overflow: hidden;background-color: #fffdf4;position: absolute;} 
.notice_risk .icon_notice{background:url('~images/seller/notice_no.png') center center no-repeat; width:.3rem;height:.78rem;line-height:.78rem;background-size:.3rem;display:inline-block;}
.notice_risk .notice_wz{line-height: .38rem;padding: .2rem 0rem .2rem 0rem;color: #be8600;}
.notice_risk .notice_public{padding:.2rem 0 .2rem 0;width:95%;}
.notice_risk .notice_public p{height:.35rem;line-height:.35rem;color: #be8600;overflow:hidden;} 

</style>
